<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
    <title>食在穗石</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
      integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
      crossorigin="anonymous"
    />
    <link
      href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
  </head>
  <body class="container">
    <div class="card my-3 bg-secondary text-white">
      <div class="card-body text-center">
        <h3 class="card-title">食在穗石</h3>
        <div class="dropdown-divider"></div>
        <p class="card-text">{{poem}}</p>
      </div>
    </div>
    <form method="post">
      <p>请选择今天的偏好:</p>
      {% for food in foods %}
      <div class="form-group">
        <label for="formControlRange">{{food}}</label>
        <input
          type="range"
          class="form-control-range"
          id={{food}}
          name={{food}}
        />
      </div>
      {% endfor %}
      <div class="text-center mb-3">
        <button type="submit" class="btn btn-primary btn-lg w-25">确定</button>
      </div>
    </form>
    {% if result %}
    <div class="jumbotron bg-info">
      <p class="text-center text-white m-0">
        这一顿决定就是你了: {{result}} !
      </p>
    </div>
    {% endif %}
  </body>
</html>
